<template>
    <!-- 放置html代码 -->
    <div>
        <h1>{{ msg }}</h1>
        <h1>翻转后(方法)：{{ revMsg() }}</h1>
        <h1>翻转后(计算属性)：{{ revMsgPlus }}</h1>
    </div>

</template>

<script>
// <!-- 放置js代码 -->
import { ref, computed } from "vue"
export default {
    name: "Reverse",
    components: {
    },
    setup() {
        const msg = ref("hello")
        const revMsg = function () {
            return msg.value.split("").reverse().join("")
        }
        const revMsgPlus = computed(() => {
            return msg.value.split("").reverse().join("")
        })        
        return {
            msg,
            revMsg,
            revMsgPlus,
        }
    }
}

</script>

<style>
/* <!-- 放置css样式代码 --> */
</style>